{% set isNav = true %}
{% extends "./layout/layout.html" %}
{% block content %}
<div class="container margin-top-20">
  <div id="row">
    <div class="col-8">
      <h5 class="margin-bottom-10">基本信息</h5>
      <form>
        <div class="form-group">
          <label for="exampleInputUserName">昵称</label>
          <input type="username" class="form-control" id="input-nick" aria-describedby="emailHelp"
            placeholder="请输入昵称" value={{userInfo.nickName}}>
          <p class="username-info"></p>
        </div>

        <div class="form-group">
          <label for="exampleInputUserName">城市</label>
          <input type="username" class="form-control" id="input-city" aria-describedby="emailHelp"
            placeholder="请输入城市" value={{userInfo.city}}>
          <p class="username-info"></p>
        </div>

        <div class="form-group">
          <label for="exampleInputPassword1">头像</label>
          <div class="col-sm-10">
            <img src={{userInfo.avatar}} style="width: 100px;" class="margin-bottom-10" id="img-picture">
            <input type="file" class="form-control-file" id="file-picture" accept="image">
          </div>
        </div>
        <button type="submit" id="btn-submit-info" class="btn btn-primary">保存</button>
      </form>
      <hr>
      <form>
        <h5>修改密码</h5>
        <div class="form-group">
          <label for="exampleInputUserName">当前密码</label>
          <input type="username" class="form-control" id="input-cur-password" aria-describedby="emailHelp"
            placeholder="请输入当前密码">
          <p class="username-info"></p>
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">新密码</label>
          <input type="password" class="form-control" id="input-new-password" placeholder="请输入新密码">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword2">确认密码</label>
          <input type="password" class="form-control" id="input-new-password-repeat" placeholder="请输入确认密码">
          <p class="password-info"></p>
        </div>
        <button type="submit" id="btn-submit-password" class="btn btn-primary">提交</button>
      </form>
      <hr>
      <button type="submit" id="btn-logout" class="btn btn-primary">退出登录</button>
    </div>
  </div>
</div>
{% endblock %} 

{% block js %}
<script>
  //图片上传
  $("#file-picture").change(function () {
    // 发送给后台的数据
    // const formData = new FormData();// 新建表单对象
    const file = $(this)[0].files[0];// 获取图片信息
    // formData.append("file", file);// 将图片信息添加到表单对象中
    // console.log(formData.get('file'));
    // ajax上传formData
    ajax.upload(
      "/api/uploadImg",
      file,
      function(err,data){
        if(err){
          alert("err");
          return;
        }
        $("#img-picture").attr("src",data.url);
      }
    )
    // $.ajax({
    //   type: "post",
    //   url: "/api/uploadImg",
    //   data: formData, //  {key:"value"} 或者 key=value&key2=value2
    //   contentType: false, //  发送信息至服务器时内容编码类型，默认值"application/x-ww-form-urlencoded"
    //   processData: false, //  默认是true,会根据data的值来转换为查询字符串，如果要传递dom树或者不希望转换的信息，值应该为false
    //   success(res) {
    //     if (res.errno === 0) {
    //       // 将头像地址变更
    //       $("#img-picture").attr("src", res.data.url);
    //     }

    //   },
    //   error (err){
    //     alert("上传图片失败 图片过大或是图片格式不对");
    //   }
    // })
  })

  // 更改基本信息
  $("#btn-submit-info").click(function(e){
    e.preventDefault()
    //获取基本信息 昵称 城市 头像的url
    const newNickName = $("#input-nick").val();
    const newCity =$("#input-city").val();
    const newAvatar = $("#img-picture").attr("src");
    //发送数据
    ajax.post(
      "/api/user/changeUserInfo",
      {nickName:newNickName,city:newCity,avatar:newAvatar},
      function (err,data){
        if(err){
          alert(err);
          return;
        }
        alert("更新用户信息成功!")
      }
    )
    // $.ajax({
    //   type:"post",
    //   url:"/api/user/changeUserInfo",
    //   data:{nickName:newNickName,city:newCity,avatar:newAvatar},
    //   success(res){
    //     console.log(res);
    //     if(res.err ===0){
    //       alert("更改用户信息成功")
    //     }else{
    //       alert("更改用户信息失败")
    //     }
    //   },
    //   error(err){
    //     alert("更改用户信息失败！")
    //   }
    // })
  
  })

  // 更改密码
  $("#btn-submit-password").click(function(e){
    //组织默认行为
    e.preventDefault();

    const oldPassword = $("#input-cur-password").val();
    const newPassword = $("#input-new-password").val();
    const newRepeatPassword = $("#input-new-password-repeat").val();

    //判断原密码与新密码是否重复
    if(oldPassword === newPassword){
      alert("更改密码失败 原始密码与新密码相同！");
      return;
    }
    // 确认密码时 判断两次密码是否一致
    if(newPassword !== newRepeatPassword){
      alert("更新密码失败 两次输入密码不匹配 ")
      return;
    }
    //发送数据
    ajax.post(
      "/api/user/changePassword",
      {oldPassword,newPassword,},
      function (err,data){
        if(err){
          alert(err);
          return;
        }
        alert("修改密码成功！")
         //清空表单
          $("#input-cur-password").val("");
          $("#input-new-password").val("");
          $("#input-new-password-repeat").val("");
      }
    )
    // $.ajax({
    //   type:"post",
    //   url:"/api/user/changePassword",
    //   data:{oldPassword,newPassword,newRepeatPassword},
    //   success(res){
    //     console.log(res);
    //     if(res.errno==0){
    //       alert("修改密码成功！")
    //       //清空表单
    //       $("#input-cur-password").val("");
    //       $("#input-new-password").val("");
    //       $("#input-new-password-repeat").val("")
    //     }else{
    //       alert("修改密码失败！")
    //     }
    //   },
    //   error(err){
    //     console.log(err);
    //   }
    // })
  })

  //退出登录
  $("#btn-logout").click(function(){
    if(confirm("您是否要退出登录？") ==false){
      return;
    }

    // 触发注销事件
    ajax.post(
      "/api/user/logout",
      function (err,data){
        if(err){
          alert(err);
          return;
        }
        alert("退出登录");
        location.href="/login"
      }
    )
    // $.ajax({
    //   type:"post",
    //   url:"/api/user/logout",
    //   success(res){
    //     alert("退出成功");
    //     location.href="/login";
    //   },
    //   error(err){
    //     alert(err)
    //   }
    // })
  })
</script>
{% endblock %}